<template>
  <list-condition-template
    ref="searchForm"
    :rows="rows"
    :total="total"
    @page-info-change="handlePageInfoChange"
    :defaultSort="{ prop: 'time', order: 'descending' }"
    :search-data="listQuery"
  >
    <template slot="condition">
      <el-form-item prop="keyword">
        <el-input placeholder="姓名 | 账号" v-model="listQuery.keyword" clearable></el-input>
      </el-form-item>
      <el-form-item prop="dateArray">
        <el-date-picker
          v-model="listQuery.dateArray"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="center"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
    </template>
 <template slot="normalOperation">
      <el-form-item class="normal-operation">
        <el-popover placement="top" width="160" v-model="clearDialogVisible">
          <p>确定要清空日志吗?</p>
          <div style="text-align: right; margin: 0">
            <el-button type="text" @click="clearDialogVisible=false">取消</el-button>
            <el-button type="primary" @click="clearAll">确定</el-button>
          </div>
          <el-button slot="reference" type="danger" v-waves >清空日志</el-button>
        </el-popover>
      </el-form-item>
    </template>

    <template slot="columns">
      <el-table-column label="姓名" align="center" property="userName"></el-table-column>
      <el-table-column label="账号" align="center" property="account"></el-table-column>
      <el-table-column label="操作内容" min-width="100" align="center" property="operation"></el-table-column>
      <el-table-column
        label="操作时间"
        min-width="150"
        align="center"
        sortable="custom"
        property="time"
      ></el-table-column>
      <el-table-column label="IP" min-width="150" align="center" property="ipAddress"></el-table-column>

      <el-table-column label="是否成功" min-width="150" align="center" property="isSuccess">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.isSuccess? 'success' : 'danger'"
          >{{scope.row.isSuccess?'成功':'失败'}}</el-tag>

          <el-popover v-if="!scope.row.isSuccess" title="错误信息" width="420"
          placement="left" trigger="click">
            <p style="width:400px;height:200px;overflow:auto;" v-html="scope.row.exceptionStacks"></p>
            <el-button type="text" size="mini" slot="reference">查看错误</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </template>
  </list-condition-template>
</template>

<script>
import operationApi from '@/api/operationLog'
import waves from '@/directive/waves' // 水波纹指令
import ListConditionTemplate from '@/components/templates/listConditionTemplate'
import dayjs from 'dayjs'
export default {
  directives: {
    waves
  },
  components: {
    ListConditionTemplate
  },
  data () {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(dayjs().subtract(1, 'week'))
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(dayjs().subtract(1, 'month'))
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(dayjs().subtract(3, 'month'))
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      tableData: [],
      rows: null,
      total: 0,
      listQuery: {
        keyword: '',
        dateArray: null,
        startTime: null,
        endTime: null
      }
    }
  },
  filters: {
    /**
     * 表格行显示状态过滤
     * @param {*} show 显示状态
     */
    showFilter (show) {
      return show ? 'success' : 'danger'
    },
    /**
     * 表格按钮显示状态过滤
     * @param {*} show 显示状态
     */
    showButtonFilter (show) {
      return !show ? 'success' : 'danger'
    }
  },
  watch: {
    'listQuery.dateArray': {
      handler (val) {
        [this.listQuery.startTime, this.listQuery.endTime] = val
      }
    }
  },
  methods: {
    /**
     * 清空数据
     */
    clearAll () {
      this.clearDialogVisible = false
      operationApi
        .clear()
        .then((response) => {
          this.$refs.searchForm.clearSearch()
        })
    },
    /**
     * 加载数据
     */
    getList (pageInfo) {
      operationApi
        .getList({ condition: this.listQuery, pageInfo })
        .then(response => {
          this.rows = response.data.content
          this.total = response.data.totalElements
        })
    },
    /**
     * 搜索条件变更处理
     */
    handleFilter () {
      this.$refs.table.changeCondition()
    },
    /**
     * 分页信息变动事件处理
     * @param  {Object} pageInfo 分页信息
     */
    handlePageInfoChange (pageInfo) {
      this.getList(pageInfo)
    },
    /**
     * 多选
     * @param rows
     */
    onMultiSelected (rows) {
      this.multiSelected = rows
    },
    handleModelFilter () {
      this.$refs.modelTable.handleConditionChange()
    },
    onModelSelected (row) {
      this.newDevice.formData.type = row
    }
  }
}
</script>
